<extend name="Public/base"/>

<block name="body">
	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{:isset($info['id'])?'编辑':'新增'}限时抢购商品</h2>
    </div>
    <div class="tab-wrap">
    	<ul class="tab-nav nav">
			<li data-tab="tab1" class="current"><a href="javascript:void(0);">基 础</a></li>
			<li data-tab="tab2"><a href="javascript:void(0);">资 料</a></li>
		<!--	<li data-tab="tab3"><a href="javascript:void(0);">分 类</a></li>
			<li data-tab="tab4"><a href="javascript:void(0);">扩 展</a></li>-->
			<li data-tab="tab5"><a href="javascript:void(0);">选 项</a></li>
		</ul>
		<div class="tab-content">
    		<form action="__SELF__" method="post" class="form-horizontal" autocomplete="off">
		    	<div id="tab1" class="tab-pane in tab1">
				     <div class="form-item">
				     	<label class="item-label">商品名称</label>
				     	<div class="controls">
				     		<input type="text" class="text input-large" name="title" value="{$info.title}" placeholder="商品名称">
				     	</div>
				     </div>
				     <div class="form-item">
				     	<label class="item-label">商品描述</label>
				     	<div class="controls">
				     		<label class="textarea">
				     			<textarea name="description" placeholder="商品描述">{$info.description}</textarea>
				     			{:hook('adminArticleEdit', array('name'=>'description','value'=>$info['description']))}
				     		</label>
				     	</div>
				     </div>

				 </div>
				 <div id="tab2" class="tab-pane tab2">

				 	<div class="form-item">
				     	<label class="item-label">商品图片</label>
				     	<div class="controls">
				     		<input type="file" id="upload_picture">
				     		<div class="upload-img-box">
				     			<volist name="pics" id="pic">
				     				<div class="upload-pre-item"><input type="hidden" name="pic[]" value="{$pic.cover_id|default=''}"/><img src="__ROOT__{$pic.cover_id|get_cover='path'}"/><span class="btn-close" title="删除图片" onclick="$(this).parent().remove();"></span></div>
				     			</volist>
				     		</div>
				     		<script type="text/javascript">
							//上传图片
						    /* 初始化上传插件 */
							$("#upload_picture").uploadify({
						        "height"          : 30,
						        "swf"             : "__STATIC__/uploadify/uploadify.swf",
						        "fileObjName"     : "download",
						        "buttonText"      : "上传图片",
						        "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
						        "width"           : 120,
						        'removeTimeout'	  : 1,
						        'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
						        "onUploadSuccess" : uploadPicture,
						        'onFallback' : function() {
						            alert('未检测到兼容版本的Flash.');
						        }
						    });
							
							function uploadPicture(file, data){
						    	var data = $.parseJSON(data);
						    	var src = '';
						        if(data.status){
						        	src = data.url || '__ROOT__' + data.path;
						        	$("#upload_picture").parent().find('.upload-img-box').append(
						        		'<div class="upload-pre-item"><input type="hidden" name="pic[]" value="' + data.id + '"/><img src="' + src + '"/><span class="btn-close" title="删除图片" onclick="$(this).parent().remove();"></span></div>'
						        	);
						        } else {
						        	updateAlert(data.info);
						        	setTimeout(function(){
						                $('#top-alert').find('button').click();
						                $(that).removeClass('disabled').prop('disabled',false);
						            },1500);
						        }
						    }
							</script>
						</div>
					</div>

					 <div class="form-item">
						 <label class="item-label">原价</label>
						 <div class="controls">
							 <input type="text" class="text input-mini" name="y_price" value="{$info.y_price}" placeholder="元宝">
						 </div>
					 </div>

					<div class="form-item">
						<label class="item-label">兑换所需元宝</label>
						<div class="controls">
							<input type="text" class="text input-mini" name="price" value="{$info.price}" placeholder="元宝">
						</div>
					</div>
					<div class="form-item">
				     	<label class="item-label">商品库存</label>
				     	<div class="controls">
				     		<input type="text" class="text input-mini" name="quantity" value="{$info.quantity}" placeholder="件">
				     	</div>
				    </div>
					 <div class="form-item">
						 <label class="item-label">其他设置</label>
						 <div class="controls no-overview">
							 <label class="checkbox"><input name="is_home_show" value="1" type="checkbox" <eq name='info.is_home_show' value='1'>checked="true" </eq> >首页显示</label>
						 </div>
					 </div>
				    <div class="form-item">
				     	<label class="item-label">商品状态</label>
				     	<div class="controls no-overview">
				     		<select name="status" title="状态" class="selectpicker" data-hide-disabled="true" data-size="5" data-live-search="true">
				    			<volist name=":getStatus('product')" id="val" key="key">
				    				<option value="{$key-1}" <eq name="info.status" value="$key-1">selected</eq>>{$val}</option>
				    			</volist>
				    		</select>
				     	</div>
				    </div>
				    <div class="form-item">
				    	<label class="item-label">产品发货地址</label>
				    	<div class="controls no-overview">
				    		<select id="province" class="selectpicker" data-hide-disabled="true" data-size="5" data-live-search="true" name="province_id" title="省份">
				    			<volist name=":getProvinces()" id="vo">
				    				<option value="{$vo.province_id}" <eq name="info.province_id" value="$vo.province_id">selected</eq>>{$vo.province}</option>
				    			</volist>
				    		</select>
				     		<script type="text/javascript">
				     		$(function(){
				     			$('#province').change(function(e){
				     				$('#city, #area').html('');
				     				$('#city, #area').selectpicker('refresh');
				     				
				     				paramter = {format : 'json', province_id : $(this).val()};
				     				
				     				$.post('{:U('Api/Public/getCities')}', paramter, function(data){
				     					if (data.code == 1) {
				     						$.each(data.data, function(i, item){
				     							$('#city').append('<option value="' + item.city_id + '">' + item.city + '</option>');
				     						});
				     						$('#city').selectpicker('refresh');
				     					}
				     				}, 'json');
				     			});
				     		});
				     		</script>
				     		<select id="city" class="selectpicker" data-hide-disabled="true" data-size="5" data-live-search="true" name="city_id" title="城市">
				     			<notempty name="info.province_id">
				     				<volist name=":getCities($info['province_id'])" id="vo">
					      				<option value="{$vo.city_id}" <eq name="info.city_id" value="$vo.city_id">selected</eq>>{$vo.city}</option>
					      			</volist>
				     			</notempty>
				     		</select>
				     		<script type="text/javascript">
				     		$(function(){
				     			$('#city').change(function(e){
				     				$('#area').html('');
				     				$('#area').selectpicker('refresh');
				     				
				     				paramter = {format : 'json', city_id : $(this).val()};
				     				
				     				$.post('{:U('Api/Public/getAreas')}', paramter, function(data){
				     					if (data.code == 1) {
				     						$.each(data.data, function(i, item){
				     							$('#area').append('<option value="' + item.area_id + '">' + item.area + '</option>');
				     						});
				     						$('#area').selectpicker('refresh');
				     					}
				     				}, 'json');
				     			});
				     		});
				     		</script>
				     		<select id="area" class="selectpicker" data-hide-disabled="true" data-size="5" data-live-search="true" name="area_id" title="区县">
				     			<notempty name="info.city_id">
				     				<volist name=":getAreas($info['city_id'])" id="vo">
					      				<option value="{$vo.area_id}" <eq name="info.area_id" value="$vo.area_id">selected</eq>>{$vo.area}</option>
					      			</volist>
				     			</notempty>
				     		</select>
				     	</div>
				     	<div class="controls">
				     		<input type="text" class="text input-large" name="address" value="{$info.address}" placeholder="详细地址">
				     	</div>
				     </div>
				 </div>
				 <div id="tab3" class="tab-pane tab3">
					<div class="form-item">
						<label class="item-label">所属店铺</label>
						<div class="controls">
							<input type="text" class="text input-4x" id="shop" onclick="$(this).val('');" value="{$info.shop_id|get_table_field=###,'id','title','shop'}" placeholder="店铺编号或名称">
							<input type="hidden" name="shop_id" value="{$info.shop_id}">
						</div>
						<script type="text/javascript">
							$(function($) {
					     		var action = '{:U('Shop/autocomplete')}';
					     		var input_val = $('input[name="shop_id"]');
					     		var shops = [];
					     		
					     		$('#shop').typeahead({
					     			source: function(query, process) {
					     				var parameter = {query: query, d: new Date()};
					     				
					     				$.post(action, parameter, function (data) {
					     					shops = data;
					     					
					     					var results = $.map(shops, function (shop) {
					                             return shop.id;
					                         });
					                         process(results);
					     				}, 'json');
					     			},
					     			
					     			matcher: function (item) {
					     				return true;
					     			},
					     			
					     			highlighter: function (item) {
					     				var shop = [];
					     				
					     				$.map(shops, function (u) {
					     					if (u.id == item) {
					     						shop = u;
					     					}
					     				});
					     				
					     				return shop.title + " (" + shop.id + ")";
					     			},
					
					     			updater: function (item) {
					     				input_val.val(item);
					     				
					     				var shop = [];
					     				
					     				$.map(shops, function (u) {
					     					if (u.id == item) {
					     						shop = u;
					     					}
					     				});
					     				
					     				return shop.title;
					     			}
					     	   });
					     	});
						</script>
					</div>
					<div class="form-item">
						<label class="item-label">商品分类</label>
						<div class="controls no-overview">
							<select class="selectpicker" data-hide-disabled="true" data-size="5" data-live-search="true" name="category_id" title="分类">
				     			<volist name="category_tree" id="cate">
				     				<option value="{$cate.id}" <eq name="info.category_id" value="$cate.id">selected</eq>>{$cate.title}</option>
			     					<volist name="cate._child" id="_child">
			     						<option value="{$_child.id}" <eq name="info.category_id" value="$_child.id">selected</eq>>&nbsp;&nbsp;--&nbsp;&nbsp;{$_child.title}</option>
			     					</volist>
				     			</volist>
				     		</select>
				     	</div>
				     </div>
				 </div>
				 <div id="tab4" class="tab-pane tab4">
				 	<div class="form-item">
						<label class="item-label">服务保障</label>
						<div class="controls no-overview">
							<select class="selectpicker" name="security_7days" title="服务保障">
								<volist name=":getStatus('security_7days')" id="val" key="key">
				    				<option value="{$key-1}" <eq name="info.security_7days" value="$key-1">selected</eq>>{$val}</option>
				    			</volist>
							</select>
						</div>
					</div>
					<div class="form-item">
						<label class="item-label">是否加入专题</label>
						<div class="controls no-overview">
							<dl class="checkmod">
								<dt class="hd">
									<label class="checkbox"><input type="checkbox" name="in_special_panic" <eq name="info.in_special_panic" value="1">checked</eq> value="1">加入抢购会</label>
								</dt>
								<dd class="bd">在 
									<select class="selectpicker" name="panic[special_panic_id]" data-live-search="true" data-size="5" title="时间段">
										<volist name=":getSpecialPanic()" id="vo">
						    				<option value="{$vo.id}" 
						    				<eq name="info.panic.special_panic_id" value="$vo.id">selected</eq>>
						    				{$vo.start_time|time_format=###,"H:i:s"} - {$vo.end_time|time_format=###,"H:i:s"}</option>
						    			</volist>
									</select> 时间段， 满 <input type="text" class="text input-mini" name="panic[condition_price]" value="{$info.panic.condition_price}" placeholder="元" />，打 
									<select class="selectpicker" name="panic[discount]" data-size="5" title="折扣">
										<volist name=":getStatus('discount')" id="val" key="key">
						    				<option value="{$key-1}" <eq name="info.panic.discount" value="$key-1">selected</eq>>{$val}</option>
						    			</volist>
									</select>
								</dd>
							</dl>
						</div>
					</div>
					<!-- <div class="form-item">
						<label class="item-label">其他设置</label>
						<div class="controls no-overview">
							<label class="checkbox"><input name="is_home_show" value="1" type="checkbox" <eq name='info.is_home_show' value='1'>checked="true" </eq> >首页显示</label>
						</div>
					</div> -->
				 </div>
				 <div id="tab5" class="tab-pane tab5">
				 	<div class="form-item">
						<label class="item-label"><a class="btn addOption">+ 选项</a><input type="text" class="text input-2x" placeholder="选项名称"></label>
						<div class="controls options">
							<volist name="info.options" id="vo">
								<dl class="checkmod">
									<dt class="hd">
										<label class="checkbox">{$vo.title}</label>
										<div class="fr">
											<a class="btn addOptionValue" data-id="{$vo.id}">+ 属性</a>
											<a class="btn delOption" data-id="{$vo.id}">- 删除</a>
										</div>
									</dt>
									<dd class="bd">
										<div class="rule-check option-btn">
											<volist name="vo._child" id="child">
												<div class="fl"><a class="btn" data-id="{$child.id}">{$child.title}</a><span class="btn-close" data-id="{$child.id}" title="删除图片"></span></div>
											</volist>
										</div>
									</dd>
								</dl>
							</volist>
						</div>
					</div>
					<div class="form-item">
						<label class="item-label"><a class="btn addOptionPrice">+ 价钱</a><input type="text" class="text input-mini" placeholder="价格"></label>
						<div class="controls">
							<div class="data-table table-striped">
								<table class="">
									<thead>
										<tr>
											<th class="">选项</th>
											<th class="">价格</th>
											<th class="">操作</th>
										</tr>
									</thead>
									<tbody>
										<volist name="info.option_prices" id="vo">
											<tr class="OptionPriceTR">
												<td class=""><volist name=":str2arr($vo['product_option_id'])" id="child"><a class="btn btn-mini">{$child|get_table_field=###,'id','title','product_option'}</a></volist></td>
												<td class=""><input type="text" class="text input-mini" placeholder="价格" data-id="{$vo.id}" value="{$vo.price}"><span class="help-inline msg"></span></td>
												<td class=""><a class="btn delOptionPrice" data-id="{$vo.id}">删除</a></td>
											</tr>
										</volist>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				 </div>
				 <div class="form-item">
			     	<button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
			     	<a class="btn btn-return" href="{:U('Product/index')}">返 回</a>
			     	<input type="hidden" name="type" value="{$info.type}">
			     	<input type="hidden" name="id" value="{$info.id}">
			     </div>
			</form>
		</div>
	</div>
</block>

<block name="script">
<link rel="stylesheet" type="text/css" href="__STATIC__/bootstrap/css/bootstrap-select.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/bootstrap/css/bootstrap-typeahead.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/videojs/css/video-js-5.2.1.css" />
<script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap-select.js"></script>
<script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="__STATIC__/videojs/js/video-js-5.2.1.js"></script>
<script type="text/javascript">
//导航高亮
highlight_subnav('{:U('Product/index')}');

$(function(){
	$(".tab-nav li").click(function(){
        var self = $(this), target = self.data("tab");
        self.addClass("current").siblings(".current").removeClass("current");
        window.location.hash = "#" + target.substr(3);
        $(".tab-pane.in").removeClass("in");
        $("." + target).addClass("in");
        //preloadvideo();
    }).filter("[data-tab=tab" + window.location.hash.substr(1) + "]").click();

	var time = 200;
	var timeout = null;
	
	$(document).delegate(".addOption", "click", function(){
		input = $(this).next('input');
		val = input.val().trim();
		if (val == "") {
			updateAlert('请填写选项名称');
			input.focus();
            setTimeout(function(){
            	$('#top-alert').find('button').click();
            },1500);
		} else {
			product_id = "{$info.id}";
			paramter = {product_id: product_id, text: val};
			
			$.post('{:U('Product/editOption')}', paramter, function(data){
				if (data.status == 1) {
					input.val('');
					data_id = data.data.id;
					$('.options').append('<dl class="checkmod"><dt class="hd"><label class="checkbox">' + val + '</label><div class="fr"><a class="btn addOptionValue" data-id="' + data_id + '">+ 属性</a><a class="btn delOption" data-id="' + data_id + '">- 删除</a></div></dt><dd class="bd"><div class="rule-check option-btn"></div></dd></dl>');
				} else {
					updateAlert(data.message);
                    setTimeout(function(){
                    	$('#top-alert').find('button').click();
                    },1500);
				}
			}, 'json');
		}
	});
	
	$(document).delegate(".delOption", "click", function(){
		if(confirm("确认要删除该选项？")) {
			self = $(this);
			id = self.attr('data-id');
			paramter = {id: id};
			
			$.post('{:U('Product/deleteOption')}', paramter, function(data){
				if (data.status == 1) {
					self.closest('.checkmod').remove();
				} else {
					updateAlert(data.message);
                    setTimeout(function(){
                    	$('#top-alert').find('button').click();
                    },1500);
				}
			}, 'json');
		}
	});
	
	$(document).delegate(".addOptionValue", "click", function(){
		pid = $(this).attr('data-id');
		$(this).closest('.checkmod').find('.option-btn').append('<div class="fl"><a data-pid="' + pid + '"><input type="text" class="text input-mini"></a></div>');
		$(this).closest('.checkmod').find('.option-btn input').focus();
	});
	
	$(document).delegate(".option-btn .btn", "click", function(){
		var self = $(this);
        clearTimeout(timeout);
        
        timeout = setTimeout(function(){
        	self.closest('.option-btn').find('.btn').removeClass('selected');
        	self.addClass('selected');
        }, time);
	});
	
	$(document).delegate(".option-btn .btn", "dblclick", function(){
		clearTimeout(timeout);
		
		var self = $(this), text = $(this).text(), pid = $(this).attr("data-pid") == undefined ? 0 : $(this).attr("data-pid"), id = $(this).attr("data-id") == undefined ? 0 : $(this).attr("data-id");
		self.removeClass('btn');
		self.html('<input type="text" class="text input-mini" placeholder="' + text + '">');
		self.find('input').focus();
	});
	
	$(document).delegate(".option-btn input", "blur", function(){
		var self = $(this);
		id = self.parent().attr('data-id') == undefined ? 0 : self.parent().attr('data-id');
		pid = self.parent().attr('data-pid') == undefined ? 0 : self.parent().attr('data-pid');
		text = self.val().trim();
		text =  text == "" ? self.attr('placeholder') : text;
		
		if (text == "" || text == undefined) {
			self.parent().remove();
			return false;
		}
		
		paramter = {id: id, pid: pid, text: text};
		
		$.post('{:U('Product/editOption')}', paramter, function(data){
			if (data.status == 1) {
				text += '<span class="btn-close" data-id="' + data.data.id + '" title="删除图片"></span>';
				self.parent().addClass('btn');
				self.parent().attr('data-id', data.data.id);
				self.parent().html(text);
			} else {
				self.parent().remove();
				updateAlert(data.message);
                setTimeout(function(){
                	$('#top-alert').find('button').click();
                },1500);
			}
		}, 'json');
	});
	
	$(document).delegate(".option-btn input", "keyup", function(e){
        if(e.keyCode==13){
        	$(this).blur();
        }
    });
	
	$(document).delegate(".option-btn .btn-close", "click", function(){
		if(confirm("确认要删除该属性？")) {
			self = $(this);
			id = self.attr('data-id');
			paramter = {id: id};
			
			$.post('{:U('Product/deleteOption')}', paramter, function(data){
				if (data.status == 1) {
					self.parent().remove();
				} else {
					updateAlert(data.message);
                    setTimeout(function(){
                    	$('#top-alert').find('button').click();
                    },1500);
				}
			}, 'json');
		}
	});
	
	$('.addOptionPrice').click(function(){
		var ids = new Array(), texts = new Array(), self = $(this), input = $(this).next('input');
		
		$.each($('.option-btn .selected'), function(i, item){
			id = $(item).attr('data-id');
			text = $(item).text();
			ids.push(id);
			texts.push(text);
		});
		
		product_id = "{$info.id}";
		price = input.val().trim();
		paramter = {product_id: product_id, ids: ids, price: price};
		
		$.post('{:U('Product/addOptionPrice')}', paramter, function(data){
			if (data.status == 1) {
				input.val('');
				items = '';
				$.each(texts, function(i, item){
					items += '<a class="btn btn-mini">' + item + '</a>';
				});
				
				self.closest('.form-item').find('tbody').append('<tr class="OptionPriceTR"><td class="">' + items + '</td><td class=""><input type="text" class="text input-mini" placeholder="价格" data-id="' + data.data.id + '" value="' + price +'"><span class="help-inline msg"></span></td><td class=""><a class="btn delOptionPrice" data-id="' + data.data.id + '">删除</a></td></tr>');
			} else {
				updateAlert(data.message);
				setTimeout(function(){
					$('#top-alert').find('button').click();
				},1500);
			}
		}, 'json');
	});
	
	$(document).delegate(".delOptionPrice", "click", function(){
		if(confirm("确认要删除该属性？")) {
			self = $(this);
			id = self.attr('data-id');
			paramter = {id: id};
			
			$.post('{:U('Product/deleteOptionPrice')}', paramter, function(data){
				if (data.status == 1) {
					self.closest('tr').remove();
				} else {
					updateAlert(data.message);
					setTimeout(function(){
						$('#top-alert').find('button').click();
					},1500);
				}
			}, 'json');
			
		}
	});
	
	$(document).delegate(".OptionPriceTR input", "click", function(){
		var self = $(this);
		self.data('param', self.val());
	});
	
	$(document).delegate(".OptionPriceTR input", "blur", function(){
		var self = $(this);
		if (self.data('param') != self.val()) {
			id = self.attr('data-id');
			price = self.val();
			paramter = {id: id, price: price};
			
			$.post('{:U('Product/editOptionPrice')}', paramter, function(data){
				var name = data.status ? "success" : "error", msg;
				msg = self.next(".msg").addClass(name).text(data.message).css("display", "inline-block");
				setTimeout(function(){
					msg.fadeOut(function(){
						msg.text("").removeClass(name);
					});
				}, 1000);
			}, 'json');
		}
	});
	
	$(document).delegate(".OptionPriceTR input", "keyup", function(e){
        if(e.keyCode==13){
        	$(this).blur();
        }
    });
});

document.onkeydown = function(event) {  
    var target, code, tag;  
    if (!event) {  
        event = window.event; //针对ie浏览器  
        target = event.srcElement;  
        code = event.keyCode;  
        if (code == 13) {  
            tag = target.tagName;  
            if (tag == "TEXTAREA") { return true; }  
            else { return false; }  
        }  
    }  
    else {  
        target = event.target; //针对遵循w3c标准的浏览器，如Firefox  
        code = event.keyCode;  
        if (code == 13) {  
            tag = target.tagName;  
            if (tag == "INPUT") { return false; }  
            else { return true; }   
        }  
    }  
};
</script>
</block>